<template>
  <div>
    <div class="top">
      <router-link to="/home">
        <span class="iconfont icon-shouye"></span>&nbsp;完美日记商城&nbsp; &gt;
      </router-link>
    </div>
    <table>
      <tr class="manjian">
        <td>
          <van-radio-group v-model="checked">
            <van-checkbox
              v-model="checked"
              checked-color="#ee0a24"
            ></van-checkbox>
          </van-radio-group>
        </td>
        <td colspan="2">
          <span
            ><span style="color: red"> 满减</span
            >再购&nbsp;1&nbsp;件立享[满&nbsp;2&nbsp;件减20元]</span
          >
          <router-link to="/coudan"
            ><span class="coudan">去凑单&gt;</span></router-link
          >
        </td>
      </tr>
      <tr>
        <td>
          <van-radio-group v-model="checked">
            <van-checkbox
              v-model="checked"
              checked-color="#ee0a24"
            ></van-checkbox>
          </van-radio-group>
        </td>
        <td>
          <img src="../../public/img/33.jpg" width="50px" />
        </td>
        <td>
          <p>第二件减20[完美日记]恣意出色丝绒细管口红</p>

          <select class="xz">
            <option>L1</option>
            <option>L2</option>
            <option>L3</option>
          </select>
        </td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td>
          <span class="price">￥89.9</span>
          <input type="button" size="1" value="-" @click="minusnum()" />
          <input
            type="text"
            size="1"
            class="sl"
            :value="count"
            ref="inputval"
          />
          <input type="button" size="1" value="+" @click="addnum()" />
        </td>
      </tr>
    </table>
    <footer>
     <div>
        <input type="checkbox" v-model="checked">&nbsp;全选
     </div>
      <div>
        合计：<span >{{sum}}</span>&nbsp;
         <button>结算</button>
      </div>
     
      
    </footer>
    <Zong />
  </div>
</template>

<script>
import Zong from "@/components/zong.vue";
export default {
  components: { Zong },
  data() {
    return { 
      count: 1,
      sum:89.9
    };
  },
  methods: {
    minusnum() {
      console.log(this.$refs.inputval.value);
      if (this.count <= 1) {
        this.count == 1;
      } else {
        this.count =parseInt( this.$refs.inputval.value )- 1;
        // this.sum=parseInt(this.$refs.price.text)*this.count
      }
    },
    addnum() {
       this.count =parseInt( this.$refs.inputval.value) +1;
        //  this.sum=parseInt(this.$refs.price.text)*this.count
   
  },
  }
};
</script>

<style scoped>
#zong {
  position: fixed;
  bottom: 0;
}
.top {
  width: 100%;

  height: 0.45rem;
  line-height: 0.45rem;
  margin: 0 0.2rem 0.2rem 0;
  font-weight: 600;
  font-size: 16px;
  background-color: rgb(248, 244, 238);
}
.goods-card {
  margin: 0;
  background-color: white;
}

table {
  width: 3.3rem;
  min-height: 160px;
  background-color: rgb(248, 244, 238);
  margin: 0 auto;
  border-radius: 0.1rem;
  padding-bottom: 0.5rem;
}
.manjian {
  height: 0.4rem;
  line-height: 0.4rem;
}
.van-submit-bar {
  bottom: 50px;
}
.coudan {
  margin-left: 0.4rem;
  color: red;
}
.xz {
  width: 0.5rem;
  height: 0.18rem;
}
input {
  width: 0.25rem;
  height: 0.25rem;
}
.price {
  margin-right: 0.5rem;
}
footer{
  display: flex;
margin-top: 3.2rem;
 justify-content: space-between;
 height: .4rem;
 background-color: rgb(248, 244, 238);
 padding:0 .1rem ;
}
footer div{
 display: flex;
 align-items: center;
 line-height: .4rem;
}
footer span{
  color: red;
  font-size: .16rem;
  font-weight: 600;
}
footer button{
  width: .8rem;
  height: .3rem;
  border-radius: .2rem;
  border: none;
  background-color:red ;
  color: white;
  line-height: .3rem;
  font-size:.16rem ;
  font-weight: 600
}
</style>